<template>
  <svg aria-hidden="true" class="mz-icon" :style="{ width: size + 'px', height: size + 'px' }">
    <use :xlink:href="`#${name}`" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
/**
 * 封装svg icon组件，用于除element icon之外添加的svg icon的使用，比如iconfont
 */
const props = defineProps<{
  size?: string | number;
  color?: string;
  name: string;
}>();
</script>

<style lang="scss" scoped>
.mz-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  outline: none;
}
</style>
